import React, { useEffect,useState,Key  } from "react";
import { Row, Col, Card, Tree, Tag, Pagination, Table,Button } from "antd";
import { useParams,useNavigate} from "react-router-dom";
import type { hosDepartmentListType,bookingScheduleListType,findScheduleListType } from "@/api/hospital/model/hospitalListTypes";
import { hosDepartmentListRequest,hosScheduleRuleRequest,findScheduleListRequest } from "@/api/hospital/hospitalList";

export default function HospitalSchedule() {
  const navigate=useNavigate();
  // 接收路由参数
  const{hoscode}=useParams();
  // console.log(hoscode,"hoscode")

  //定义一个控制treeData的state
  const [treeData, setTreeData] = useState<hosDepartmentListType>([]);

  //定义一个时间排班规则的当前页码
  const [page, setPage] = useState(1);
  //定义一个时间排班规则的每页条数
  const [limit, setLimit] = useState(3);
  //定义当前选中的科室
  const [depCode, setDepCode] = useState("200040878");
  //定义当前科室的排班规则
  const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
  //定义当前科室的排班规则总条数
  const [total, setTotal] = useState(0);
  //定义当前选中的时间
  const [workDate, setWorkDate] = useState("2022-04-28");
  //定义表格的数据
  const [sourceData, setSourceData] = useState<findScheduleListType>([]);


   //1.组件初始加载的时候发送请求
   useEffect(() => {
    const getDepartmentList = async () => {
      const result = await hosDepartmentListRequest(hoscode as string);
      // console.log(result);
      //把获取到的科室的数据交给state
      setTreeData(result);
    };
    getDepartmentList();
  }, []);

  //2.组件初始加载的时候发送科室列表请求
  useEffect(() => {
    const getScheduleRule = async () => {
      const result = await hosScheduleRuleRequest({
        page:page ,
        limit: limit,
        hoscode:hoscode as string,
        depcode:depCode, 
      }); 

      // console.log(result,"qqqq");
      setScheduleRule(result.bookingScheduleList);
      setTotal(result.total);
    };
    getScheduleRule();
  }, [page,limit,depCode]);

  
  //3.组件初始化的时候根据科室和时间发送详细信息请求
  useEffect(() => {
    const getFindScheduleList = async () => {
      const result = await findScheduleListRequest({
        hoscode: hoscode as string,
        depcode: depCode,
        workDate: workDate,
      });
      // console.log(result);
      setSourceData(result);
    };
    getFindScheduleList();
  }, [workDate,depCode]);

 //1.改变页码的事件回调函数
 const changePageHandle = (page: number, limit: number) => {
  setPage(page);
  setLimit(limit);
};

//2. tree结构被选中时调用的回调函数
const treeSelectHandle=(depCodeArr: Key[])=>{
console.log(depCodeArr,"depCodeArr")
  setDepCode(depCodeArr[0] as string);

}
  
//3.点击事件的时间回调函数
const scheduleRuleHandle = (workDate: string) => {
  return () => {
    setWorkDate(workDate);
  };
};


  //table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
     
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
      
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    
    },
    {
      title: "挂号费用",
      dataIndex: "amount",

    },
    {
      title: "擅长技能",
      dataIndex: "skill",
 
    },
  ];
  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };
  return (
    <Card>
      <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
      <Row gutter={20}>
        <Col span={5}>
          <div>
            <Tree  
            //antd目前没有很好的解决treeData修改字段后的类型控制,临时解决方案是断言为[]
              treeData={treeData as []}
              style={treeStyle}
              fieldNames={{ title: "depname", key: "depcode" }}
              expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
              onSelect={treeSelectHandle}
             />
          </div>
        </Col>
        <Col span={19}>
          <div style={{ marginBottom: "20px" }}>
          {scheduleRule.map((item) => {
              return (
                <Tag 
                onClick={scheduleRuleHandle(item.workDate)}
                style={{ cursor: "pointer" }}
                key={item.workDate}>
                  <p>{item.workDate}</p>
                  <p>
                    {item.availableNumber}/{item.reservedNumber}
                  </p>
                </Tag>
              );
            })}
          </div>
          <Pagination
            current={page}
            pageSize={limit}
            total={total}
            onChange={changePageHandle}
          />
          <Table  columns={columns} style={{ marginTop: "20px" }} 
           dataSource={sourceData}
            rowKey={"id"}
            bordered
            pagination={false} ></Table>
        <Button
            onClick={() => {
              navigate(-1);
            }}
            style={{ marginTop: "30px" }}
          >
            返回
          </Button>
        </Col>
      </Row>
    </Card>
  );
}
